import React, { PureComponent } from 'react'
import { View, StyleSheet, Text } from 'react-native'
import { ScaleS, ScaleT } from 'src/utils/ScreenUtil'
import PropTypes from 'prop-types'
import CustomButton from '../button/CustomButton'
import { getGenderChinese } from 'src/utils/ConfigUtil'
import CustomImage from '../image/CustomImage'
// 用户信息 选择性别
export default class GenderChoice extends PureComponent {
  state = {
    gender: this.props.gender
  }

  onConfirm = (gender) => {
    const { onConfirm } = this.props
    onConfirm && onConfirm(gender)
    this.setState({
      gender
    })
  }

  render () {
    const { gender } = this.state
    return (
      <View style={styles.container}>
        <Text style={styles.titleLabel}>选择性别</Text>
        <View style={styles.btnsWrap}>
          <CustomButton style={styles.genderWrap} params={'male'} onPress={this.onConfirm}>
            {gender !== 'male' && <CustomImage style={styles.genderImg} source={require('@/imgC/userinfo/gender_boy.png')}/>}
            {gender === 'male' && <CustomImage style={styles.genderImg} source={require('@/imgC/userinfo/gender_boy_active.png')}/>}
            <Text style={styles.genderTxt}>{getGenderChinese('male')}</Text>
          </CustomButton>
          <CustomButton style={styles.genderWrap} params={'female'} onPress={this.onConfirm}>
            {gender !== 'female' && <CustomImage style={styles.genderImg} source={require('@/imgC/userinfo/gender_girl.png')}/>}
            {gender === 'female' && <CustomImage style={styles.genderImg} source={require('@/imgC/userinfo/gender_girl_active.png')}/>}
            <Text style={styles.genderTxt}>{getGenderChinese('female')}</Text>
          </CustomButton>
        </View>
      </View>
    )
  }
}

GenderChoice.propTypes = {
  onConfirm: PropTypes.func,
  gender: PropTypes.string
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#FFFFFF',
    borderRadius: ScaleS(12),
    alignItems: 'center'
  },
  titleLabel: {
    marginTop: ScaleS(30),
    color: '#444444',
    fontSize: ScaleT(24),
    fontWeight: '300'
  },
  btnsWrap: {
    width: '100%',
    paddingHorizontal: ScaleS(55),
    marginTop: ScaleS(60),
    marginBottom: ScaleS(50),
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center'
  },
  genderWrap: {
    alignItems: 'center'
  },
  genderImg: {
    width: ScaleS(80),
    height: ScaleS(80)
  },
  genderTxt: {
    marginTop: ScaleS(20),
    color: '#444444',
    fontSize: ScaleT(16),
    fontWeight: '400'
  }
})
